﻿<div id="file-picker-container">
    <div id="file-picker-command-panel">
        <a id="lnkNewFolder" href="javascript:void(0)" class="k-button"><span class="k-icon k-i-folder-add"></span>New Folder</a>
        <a id="lnkUpload" href="javascript:void(0)" class="k-button"><span class="k-icon k-i-folder-up"></span>Upload</a>
    </div>
    <div id="file-picker-content">
        <div id="folder-panel">
            @Html.TreeViewFolder("~/Upload")
        </div>
        <div id="file-panel">
            <ul id="file-list">
            </ul>
        </div>
    </div>
    <div>
        <label id="lblPath">~/Upload</label>
    </div>
</div>

<div id="uploadWindow">
    <input type="file" id="flUpload" />
</div>

<div id="newFolder">
    <form id="frmNewFolder">
        <fieldset>
            <p>
                <label>Tên</label><input type="text" id="txtFolderName" class="text-input medium-input" />
            </p>
            <p>
                <a class="k-button"><span class="k-icon k-i-folder-add"></span>Create</a>
            </p>
        </fieldset>
    </form>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        var window = $("#uploadWindow");

        window.kendoWindow({
            width: "600px",
            title: "About Alvar Aalto",
            close: function () {
                var upload = $("#flUpload").data("kendoUpload");
            },
            open: function () {
                window.data("kendoWindow").center();
            },
            visible: false
        });

        var wndFolder = $("#newFolder");

        wndFolder.kendoWindow({
            width: "400px",
            title: "New Folder",
            close: function () {
                $("#txtFolderName").val("");
            },
            open: function () {
                wndFolder.data("kendoWindow").center();
            },
            visible: false,
            resizable: false,
            modal: true
        });

        $("#file-picker-container").kendoSplitter({
            orientation: "vertical",
            panes: [
                { collapsible: false, resizable: false, size: "36px" },
                { collapsible: false },
                { collapsible: false, resizable: false, size: "48px" }
            ]
        });

        $("#file-picker-content").kendoSplitter({
            orientation: "horizontal",
            panes: [
                { collapsible: false, size: "200px", min: "200px", max: "300px" },
                { collapsible: false }
            ]
        });

        $(".tree-view").kendoTreeView({
            select: function (e) {
                var path = $(e.node).attr("path");

                $("#lblPath").text(path);

                $.ajax({
                    type: "POST",
                    data: { path: path },
                    url: "@Url.Action("GetFilesInFolder")",
                    success: function (data) {
                        $("#file-list").empty();
                        $.each(data, function (i, value) {
                            $("#file-list").append("<li style='display:inline-block'><div style='text-align: center;'><img src='" + value.Path + "?width=120&height=120'/><div><label>" + value.FileName + "</label></div></div></li>");
                        });
                    }
                });
            }
        });

        $("#lnkNewFolder").live("click", function () {
            if (wndFolder.data("kendoWindow")) {
                wndFolder.data("kendoWindow").open();
            }
        });

        $("#lnkUpload").live("click", function () {
            if (window.data("kendoWindow")) {
                window.data("kendoWindow").open();
            }
        });

        $("#flUpload").kendoUpload({
            async: {
                saveUrl: "@Url.Action("Upload", "FileManagement")",
                saveField: "attachments",
                autoUpload: true
            },
            showFileList: true,
            success: function (e) {
                if (window.data("kendoWindow")) {
                    window.data("kendoWindow").close();
                }
            },
            upload: function (e) {
                e.data = { path: $("#lblPath").text() };
            }
        });
    });
</script>
